import { Component, Vue } from 'vue-property-decorator';
import { mapState } from 'vuex';
import { MODULE_PATH } from '@/store/modules/system'
import navComponent from '../../router/nav-components';
import './style.scss';

@Component<VtSideNav>({
  name: 'vt-side-nav',
  props: {},
  computed: {
    ...mapState(MODULE_PATH, ['isMobi', 'docWidth'])
  },
  methods: {},
  watch: {
  },
})

export default class VtSideNav extends Vue {
  readonly isMobi!: boolean;
  readonly docWidth!: number;
  render() {
    return (
      <div class={["vtx-sideNav",  this.isMobi ? 'is-mobi' : '']}>
        <ul class="vtx-sideNav__nav-warp">
          {
            navComponent.map((nav: any) => {
              return (
                <li class="vtx-sideNav__nav-group">
                  <span class="vtx-sideNav__nav-group-title">{nav.name}</span>
                  <div class="vtx-sideNav__nav-group-container">
                    <ul>
                      {
                        
                        nav.list.map((item: any) => {
                          return (
                            this.isMobi ? 
                            item.isMobi &&
                            <li 
                              class={['vtx-sideNav__sub-nav', this.sideNavActive(item.title)]}
                              onClick={() => { this.toPath(item) }}
                            >
                              {item.mobiTitle}
                            </li> :
                            <li
                              class={['vtx-sideNav__sub-nav', this.sideNavActive(item.title)]}
                              onClick={() => { this.toPath(item) }}
                            >
                              {this.docWidth < 1050 ? item.mobiTitle : item.title}
                            </li> 
                          )
                        })
                      }
                    </ul>

                  </div>
                </li>
              )
            })
          }
        </ul>
      </div>
    );
  }

  mounted() { }

  toPath(item: any) {
    if (!!!item.path) {
      return;
    }
    this.$router.push(item.path);
  }

  sideNavActive(name: string) {
    return this.$route.name === name ? 'is-active' : ''
  }
}